<template>
  <div style="background: #f5f5f5">
    <div class="indexback">
      <div class="user">
        <img class="userimg" src='../../img/index/user.png'/>
        <div class="information">
          <span>{{ name }}</span>
          <img src="../../img/index/userqie.png"  @click="switchingIdentities"/>
        </div>
      </div>


      <div class="main-modules">
        <div class="module class-management" @click="jumpTo(menu[0].url)">
          <h3>{{ menu[0].label }}</h3>
          <div class="module-description">查看和管</div>
          <p>
            <img :src="menu[0].img"/>
          </p>
        </div>
        <div class="moduleindex courseware-sharing" @click="jumpTo(menu[1].url)">
          <h3>{{ menu[1].label }}</h3>
          <div class="module-description">查看和</div>
          <img :src="menu[1].img"/>
        </div>
      </div>

      <div class="other-menu-background">
        <div class="other-menu">
          <div class="other-other">其他</div>
          <div v-for="(item, index) in menu.slice(2)" :key="item.index" @click="jumpTo(item.url)">
            <div class="menu-item" >
              <img v-bind:src="item.img" class="menu-icon" >
              <div class="menu-text">
                <div class="menu-label">{{ item.label }}</div>
                <div class="menu-description"><span>课程选择</span>|<span>字段字段</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>


<!--      <ul class="indexTab">-->
<!--        <li v-for="item in menu" :key="item.index" @click="jumpTo(item.url)" name="item.url">-->
<!--          <div class="indexTabimg">-->
<!--            <img v-bind:src="item.img" />-->
<!--            <div class="drop" v-if="item.xin>0">{{ item.xin }}</div>-->
<!--          </div>-->
<!--          <div class="indexTabDiv">-->
<!--            <div class="indexTabTitle">{{ item.label }}</div>-->
<!--            <div class="indexTabAssistant"><span>课程选择</span>|<span>字段字段</span></div>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
    </div>
  </div>
</template>

<script>
import { showLoadingToast } from 'vant';
import {useRouter} from 'vue-router'
export default {
  data() {
    return {
      identity:true,
      name:'JOJO学员',
      menu: [
        {
          "id": "1",
          "label": "我要选课",
          "img": '/src/img/index/icon_xk@2x.png',
          "xin":'0',
          'url':'/courseSelection'
        },
        {
          "id": "2",
          "label": "我的课程",
          "img": '/src/img/index/icon_kc@2x.png',
          "xin":'4',
          "url":'/myCourses',
        },
        {
          "id": "3",
          "label": "待交作业",
          "img": '/src/img/index/icon_zy@2x.png',
          "xin":'5',
          "url":'/pendingAssignments',
        },
        {
          "id": "4",
          "label": "我要请假",
          "img": '/src/img/index/icon_qj@2x.png',
          "xin": 1,
          "url":'/askForLeave',
        },
        {
          "id": "5",
          "label": "已完成课程",
          "img": '/src/img/index/icon_wc@2x.png',
          "xin": 0,
          "url":'/completeClassHours'
        },
        {
          "id": "6",
          "label": "消息列表",
          "img": '/src/img/index/icon_xx@2x.png',
          "xin": 2,
          "url":'/messageList'
        },
        {
          "id": "7",
          "label": "我的积分",
          "img": '/src/img/index/icon_jf@2x.png',
          "xin": 0,
          "url":'/myPoints'
        }
      ],
    }
  },
  mounted() {
    console.log(this.html)
    document.title = '首页';
  },
  methods: {
    out() {
      //       showConfirmDialog({
      //   title: '提示',
      //   message: '您确定要退出登录吗？',
      // })
      //   .then(() => {
      //     store.removeUserInfo()
      //     router.push('/login')
      //   })
      //   .catch(() => {})
    },
    jumpTo(val){
      console.log(this.$route)
      this.$router.push(val);
    },
    switchingIdentities(){
      this.identity = !this.identity
      if(!this.identity){
        this.name='胡老师'
        this.menu = [
          {
            "id": "1",
            "label": "班级管理",
            "img": '/src/img/index/icon_bjgl@2x.png',
            "xin":'0',
            'url':'/classManagement'
          },
          {
            "id": "2",
            "label": "课件分享",
            "img": '/src/img/index/icon_kjfx@2x.png',
            "xin":'0',
            'url':'/coursewareSharing'
          },
          {
            "id": "3",
            "label": "当日点评",
            "img": '/src/img/index/icon_drdp@2x.png',
            "xin":'0',
            'url':'/commentList'
          },
          {
            "id": "5",
            "label": "学员请假",
            "img": '/src/img/index/icon_xyqj@2x.png',
            "xin": 1,
            "url":'/leaveList'
          },
          {
            "id": "8",
            "label": "学员查询",
            "img": '/src/img/index/icon_xycx@2x.png',
            "xin": 0,
            'url':'/studentInquiry'
          },
          {
            "id": "8",
            "label": "课程查询",
            "img": '/src/img/index/icon_kccx@2x.png',
            "xin": 0,
            'url':'/courseQuery'
          },
        ]
      }else{
        this.name='JOJO学员'
        this.menu = [
          {
            "id": "1",
            "label": "我要选课",
            "img": '/src/img/index/icon_xk@2x.png',
            "xin":'0'
          },
          {
            "id": "2",
            "label": "我的课程",
            "img": '/src/img/index/icon_kc@2x.png',
            "xin":'0'
          },
          {
            "id": "3",
            "label": "待交作业",
            "img": '/src/img/index/icon_zy@2x.png',
            "xin":'0'
          },
          {
            "id": "4",
            "label": "我要请假",
            "img": '/src/img/index/icon_qj@2x.png',
            "xin": 0
          },
          {
            "id": "5",
            "label": "已完成课程",
            "img": '/src/img/index/icon_wc@2x.png',
            "xin": 0
          },
          {
            "id": "6",
            "label": "消息列表",
            "img": '/src/img/index/icon_xx@2x.png',
            "xin": 2
          },
          {
            "id": "7",
            "label": "联系我们",
            "img": '/src/img/index/icon_lx@2x.png',
            "xin": 0
          },
        ]
      }
    }

  }
}
</script>


<script setup>


const changeName = (payload) => {
  name.value = payload
}

const showToastHandler = () => {
  TestRef.value.showToast('Hello')
}

</script>
<style>

</style>
<style scoped lang="less">
/* 全局隐藏滚动条 */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
html::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
}

.layout-container{
  background: #f5f5f5
}

/* 确保.app-container隐藏滚动条 */
/* 全局隐藏滚动条 */
html {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

body {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
}

.app-container{
  background: #f5f5f5;
  padding:0px 16px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.app-container::-webkit-scrollbar {
  display: none;
}

/* 确保所有滚动容器都隐藏滚动条 */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
}
.app-container{
  background: #f5f5f5;
  padding:0px 16px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.app-container::-webkit-scrollbar {
  display: none;
}
.indexback {
  background: url(../../img/index/homeBackground.png);
  background-size: 100%;
  background-repeat: no-repeat;
  padding:0 16px;
  .user {
    padding: 22px 8px 13px;
    display: flex;
    align-items: center;
    .userimg {
      width: 54px;
      height: 54px;
    }
  }

  .information {
    display: flex;
    margin-left: 11px;
    flex-direction: column;

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 20px;
      color: #333;
      line-height: 28px;
      text-align: center;
      font-style: normal;
    }

    img {
      width: 66px;
      height: 18px;
    }
  }

  .indexTab {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding:0 16px;
    .indexTabimg {
      width: 66px;
      height: 66px;
      margin: 16px auto 12px;
      display: block;
      position: relative;
      img{
        width: 100%;
      }
      .drop{
        background: red;
        color: #fff;
        font-size: 14px;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        line-height: 21px;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        position: absolute;
        top:0px;
        right: 0px;
      }
    }

    .indexTabTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 20px;
      text-align: center;
      font-style: normal;
    }

    .indexTabAssistant {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 17px;
      text-align: center;
      font-style: normal;
    }

    li {
      width: 162px;
      height: 151px;
      background: #FFFFFF;
      border-radius: 8px;
      margin-bottom: 19px;
    }
  }
}


.index-page {
  padding: 22px 16px;
  max-width: 800px;
  margin: 0 auto;
  background-image: url('@/assets/homeBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

.top-section {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  gap: 11px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details h2 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  margin: 0;
  color: #333333;
}

.role-switch {
  width: 66px;
  height: 18px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
}

.main-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px;
  margin-bottom: 30px;
}

.module {
  padding:10px 20px 0px;
  border-radius: 8px;
  background-color: #f8f8f8;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: linear-gradient( 139deg, #2987FD 0%, #DEEEFF 100%);
  border-radius: 8px;
  height: 151px;
  p{
    margin: 0px;
  }
}
.module-description{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 17px;
  text-align: center;
  font-style: normal;
  margin-bottom: 12px;
  p{
    margin: 0px;
  }
}
.module img{
  width: 82px;
}
.moduleindex img{
  width: 82px;
}
.moduleindex {
  padding:10px 20px 0px;
  border-radius: 8px;
  background-color: #f8f8f8;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: linear-gradient( 140deg, #6A71FE 0%, #EDECFF 100%);
  border-radius: 8px;
  height: 151px;
}

.moduleindex h3 {
  margin: 0 0 2px 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  font-style: normal;
}


.module h3 {
  margin: 0 0 2px 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  font-style: normal;
}

.other-menu-background{
  background: #fff;
  border-radius: 8px;
}

.other-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  //background-image: url(http://localhost:8081/img/menuBackground.fbe0e007.png);
  //background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  padding: 15px;
  border-radius: 8px;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.menu-title {
  font-weight: bold;
  font-size: 16px;
}

.menu-price {
  color: #2987FD;
  font-weight: bold;
}

.menu-item {
  padding: 15px;
  background-color: #F3F9FD;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-icon {
  width: 43px;
  height: 43px;
}

.menu-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-label {
  font-weight: 500;
  font-size: 16px;
  color: #333;
}

.menu-description {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}
.other-other{
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: norma
}
</style>
